#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;

  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url("../assets/pageBg.png");
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    height: 100%;

    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }

    .dv-dec-10-s {
      transform: rotateY(180deg);
    }

    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }

    .title {
      position: relative;
      width: 450px;
      height: 70px;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .img {
        width: 100%;
        height: 100%;

        img {
          height: 100%;
        }
      }

      .title-text {
        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }

      .dv-dec-6 {
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 250px;
        height: 8px;
        transform: translate(-50%);
      }
    }

    // 第二行
    .aside-width {
      width: 100%;
      height: 16%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .img_logo1 {
        display: flex;
        justify-content: center;
        margin: auto;
        width: 80%;
        height: 70%;
      }

      .img_logo2 {
        display: flex;
        justify-content: center;
        margin: auto;
        width: 80%;
        height: 100%;

        .time_box {
          display: flex;
          justify-content: center;
          flex-direction: column;
          height: 20px;
          margin: 10px auto;

          .time {
            display: flex;
            justify-content: center;
            font-size: 40px;
            padding: 5px;
          }
        }
      }

      .img_logo3 {
        display: flex;
        justify-content: center;
        margin: auto;
        width: 78%;
        height: 60%;
      }
    }

    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
    }


    .body-box {
      margin-top: 16px;
      display: flex;
      height: 95%;
      //flex-direction: column;

      .left_box {
        width: 30%;
        display: flex;
        flex-direction: column;
      }

      .center_box {
        width: 40%;
        height: 90%;
        display: flex;
        flex-direction: column;

        .face {
          height: 50% !important;
          margin-bottom: 5%;
        }

        .process {
          height: 45% !important;
        }
      }

      .right_box {
        width: 30%;
        display: flex;
        flex-direction: column;
      }

      //下方区域的布局
      //.content-box {
      //  display: grid;
      //  grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
      //}
      //
      // 底部数据
      //.bottom-box {
      //  margin-top: 10px;
      //  display: grid;
      //  grid-template-columns: repeat(2, 50%);
      //}
    }

    //// 平行四边形
    //.react-right {
    //  &.react-l-s {
    //    text-align: right;
    //    width: 500px;
    //  }
    //  font-size: 18px;
    //  width: 300px;
    //  line-height: 50px;
    //  text-align: center;
    //  //transform: skewX(-45deg);
    //
    //  .react-after {
    //    position: absolute;
    //    right: -25px;
    //    top: 0;
    //    height: 50px;
    //    width: 50px;
    //    background-color: #0f1325;
    //    //transform: skewX(45deg);
    //  }
    //
    //  .text {
    //    display: inline-block;
    //    //transform: skewX(45deg);
    //  }
    //}
    //
    //.react-left {
    //  &.react-l-s {
    //    width: 500px;
    //    text-align: left;
    //  }
    //  font-size: 18px;
    //  width: 300px;
    //  height: 50px;
    //  line-height: 50px;
    //  text-align: center;
    //  transform: skewX(45deg);
    //  background-color: #0f1325;
    //
    //  .react-left {
    //    position: absolute;
    //    left: -25px;
    //    top: 0;
    //    height: 50px;
    //    width: 50px;
    //    background-color: #0f1325;
    //    transform: skewX(-45deg);
    //  }
    //
    //  .text {
    //    display: inline-block;
    //    transform: skewX(-45deg);
    //  }
    //}


  }
}
